<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .node{
      border: 1px solid #333;
    }

    .g6-minimap-container {
      border: 1px solid #e2e2e2;
    }
    .g6-minimap-viewport {
      border: 2px solid rgb(25, 128, 255);
    }
  </style>
  <script src="./node_modules/@antv/g6/dist/g6.min.js"></script>
</head>
<body>
<div id="mountNode"></div>
<script>
  const data = {
    "nodes": [
      {
        color: '#333',
        size: 50,
        type: "customNode11",
        shape: "customNode11",
        "id": "node1",
        "x": 50,
        "y": 100
      },
      {
        "shape": "customNode11",
        "id": "node2",
        "x": 250,
        "y": 100
      }
    ],
  };

  G6.registerNode('customNode11', {
    draw(item, group) {
      const html = '<div class="node">HTML 节点</div>';
      return group.addShape('dom', {
        attrs: {
          x: 0,
          y: 0,
          width: 100,
          height: 24,
          html
        }
      });
    }
  });

  const minimap = new G6.Minimap({
    size: [150, 100],
  });
  const graph = new G6.Graph({
    renderer: 'svg',
    container: 'mountNode',  // dom 容器 或 容器ID
    width: 800,
    height: 500,
    fitCenter: true,
    plugins: [minimap],
    modes: {
      default: ['customNode11'],
    },
  });
  graph.read(data);
</script>
</body>
</html>